<template>
  <div class="tag-container overflow-x-auto flex-row">
    <div :class="[`tag-item flex-row flex-center cursor-pointer ${'tag-active-item'}`]">
      aaaa
      <CloseOutlined class="tag-close-icon cursor-pointer" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { CloseOutlined } from '@ant-design/icons-vue'
import { ref } from 'vue'

const tagArray = ref([])
</script>

<style scoped lang="less">
.tag-container {
  height: 35px;
  border-bottom: 1px solid #ccc;
  .tag-item {
    position: relative;
    background-color: #f5f5f5;
    color: #333;
    border-right: 1px solid var(--el-menu-border-color);
    width: 136px;
    user-select: none;
    padding: 0 20px 0 10px;
    &:first-child {
      border-left: 1px solid var(--el-menu-border-color);
    }
    &.tag-active-item {
      background-color: #fff;
      color: #333;
      border-bottom: 2px solid var(--el-menu-active-color);
    }
    .tag-close-icon {
      position: absolute;
      right: 10px;
      font-size: 12px;
      &:hover {
        color: var(--el-color-primary);
      }
    }
  }
}
</style>
